import Bar from '@/components/Bar';
import { ftTodoList } from '@/service/modules/home';
import { RootState } from '@/type/store';
import { Button } from 'antd';
import { useEffect } from 'react';
import { useDispatch, useModel, useSelector, useStore } from 'umi';

export default () => {
  const { user, setUser, loading, setLoading } = useModel('userModel');
  const { docsData } = useModel('docs.model');

  const dispatch = useDispatch();
  const $store = useStore();
  // type RootState = ReturnType<(typeof $store)['getState']>;
  const { menuData } = useSelector((state: RootState) => state.homeModel);

  // const $store = useStore();

  // const $store = useStore();
  // console.log('$store', $store.getState.);

  useEffect(() => {
    dispatch({
      type: 'homeModel/queryMenu',
    });
    ftTodoList().then((res) => {
      console.log('res', res);
    });
  }, []);

  function btnHandle() {
    setUser({
      name: 'user2',
      age: 18,
      sex: 'male',
    });
  }

  return (
    <div>
      <p>This is umi docs.</p>
      <Button type="primary">Button</Button>
      <div style={{ margin: '30px' }}>
        <Button type="primary" onClick={btnHandle}>
          {user.name}
        </Button>
        <Button type="primary" style={{ marginLeft: '10px' }}>
          {docsData.username}
        </Button>
      </div>
      <Bar></Bar>
      <div>
        {menuData.map((item: any) => {
          return (
            <div key={item.title}>
              <img src={item.image} alt="" />
            </div>
          );
        })}
      </div>
    </div>
  );
};
